<template>
  <div class="import-container">
    <!-- 导入组件 -->
    <upload-excel :on-success="onSuccess" :before-upload="beforeUpload" />
    <!-- table组件 -->
  </div>
</template>

<script>
import { importEmployee } from '@/api/employees'
import { transExcelDataToSouceData } from '@/utils/excelData'
export default {
  name: 'Import',
  methods: {
    async onSuccess({ results, header }) {
      // results代表的是表格数据
      // header代表的是表头数据
      console.log('解析成功：', results, header)
      // 业务：
      // excel组件只能提供一个数据转换的功能 只能把excel格式 转换成js能认识的普通数据对象 （excel -> js）
      // 我们拿到转换好的数据之后，需要自行调用接口去完成批量添加功能
      // 1. 把excel表格转换成的js数据 经过格式化处理 处理成后端需要的样子格式 (js -> js)
      const apiData = transExcelDataToSouceData(results)
      // 2. 调用批量导入接口 完成数据落库
      await importEmployee(apiData)
      // 询问是否继续
      this.$confirm('导入已完成，是否继续?', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '完成',
        type: 'warning'
      }).then(() => {
        // 提示完成
        // this.$message.success('导入完成')
      }).catch(() => {
        // 页面跳转 回到之前页面
        this.$router.push('/employees')
      })
    },
    beforeUpload(file) {
      // 代表文件对象 可以根据文件对象中的size name做解析前校验
      // 如果加了这个函数 必须要在最后返回一个布尔值才能校验通过
      // 通过之后才能执行成功回调函数
      console.log('上传前校验', file)
      return true
    }
  }
}
</script>
<style lang="scss" scoped>
.import {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
